<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="配电柜详情" :isHome="true" :isBack="true"></navigationTop>
		<!-- 配电柜详情 -->
	<view class="main-bg" :scroll-y="true">
		<view class="detail-wrap wrap">
			<!-- 正文方块 -->
			<view class="rect box-shadow">
				<view class="model-top">
					<!-- 设备icon 圆 -->
					<view class="arc">
						<view class="arc-image" :style="{
						'background-image':'url('+$store.state.baseImg+'/icon/box.png)'
					}">
							<view :class="[infoData.deviceStatus == '0'?'':'alarmLevel'+infoData.deviceStatus,'red-dot']"></view>
						</view>
					</view>
					<!-- 信息 -->
					<view class="mess clearFix">
						<u-row align='top'>
							<u-col :span="3" class="info-label" text-align="center">名称</u-col>
							<u-col :span="9" class="info-text">{{infoData.deviceName}}</u-col>
						</u-row>
						<u-row align='top'>
							<u-col :span="3" class="info-label" text-align="center">类型</u-col>
							<u-col :span="9" class="info-text">{{infoData.deviceType}}</u-col>
						</u-row>
						<u-row align='top'>
							<u-col :span="3" class="info-label" text-align="center">位置</u-col>
							<u-col :span="9" class="info-text">{{infoData.devicePlace}}</u-col>
						</u-row>
					</view>
					<view class="changeLsitBtn" :style="{
						'background-image':'url('+$store.state.baseImg+'/icon/tab.png)'
					}" @tap="echarts.changeList"></view>
				</view>
				<!-- END -->
				<view class="text-center alarm-text">
					<view :prop="baseImg" :change:prop="echarts.updateBaseImg">当前状态</view>
					<view :class="'text-level'+infoData.deviceStatus">{{deviceStatus(infoData.deviceStatus)}}</view>
				</view>
				<!-- item -->
				<view class="clearFix voltage" v-for="(item,indx) in itemData" :key="indx" v-show="nomalData == 'nomal'">
					<view class="float-block float-label">{{item.title1}}</view>
					<view :class="['float-block',item.value1>=250?'text-color-red':'text-color-nor']">{{item.val1}}</view>
					<view class="float-block float-label">{{item.title2}}</view>
					<view :class="['float-block',item.value2>=150?'text-color-red':'text-color-nor']">{{item.val2}}</view>
				</view>
				<!-- 告警echarts图表 -->
				<template v-if="nomalData == 'echarts' && echartsLoading">
					<view class="echarts-loading">
						<u-loading mode="flower" size="40"></u-loading>
						<view>
							<text class="loading-text">正在生成</text>
						</view>
					</view>
				</template>
				<view class="echartsData" :prop="itemData" id="echartsData" v-show="nomalData == 'echarts'" :change:prop="echarts.updateEcharts">
					<view class="echartsItems" v-for="(item,index) in itemData" :key="index">
						<view :id="'echarts'+index" class="echarts-item">
						</view>
					</view>
				</view>
				<!-- end -->
			</view>
			<!-- end rect -->
			<!-- tabs组件 -->
			<view class="tabs-content">
				<navTab :tabList="tabList" @changeIndex="changeSwiper" style="margin-bottom: 30rpx;"></navTab>
			</view>
			<!-- tabs组件 -->
			<!-- 轮播盒子 -->
			<view style="height: 560rpx;">
				<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
			</view>
			<!-- 轮播盒子 -->
		</view>
	</view>
	</view>
</template>

<script>
	import navTab from '@/components/navTab/navTab.vue';
	import navigationTop from "@/components/navigationTop/index.vue";
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import {chooseAlarmLevel,handleSwiperGroup,alarmTabs} from "@/common/utils/index.js";
	export default {
		components: {
			navTab,
			navigationTop,
			AlarmSwiper
		},
		data() {
			return {
				echartsLoading:false,
				refreshSwiper:true,
				baseImg:"",
				infoData:{
					deviceName:"",
					deviceType:"",
					deviceStatus:"",
					devicePlace:""
				},
				tabList:alarmTabs(),
				nomalData: 'nomal',
				background: ['color1', 'color2', 'color3'],
				optionData:{},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperGroup:{}, //swiper组
				itemData: [{
						title1: "A相电压",
						val1: "V",
						value1:"",
						title2: "A相电流",
						val2: "A",
						value2:""
					},
					{
						title1: "B相电压",
						val1: "V",
						value1: "",
						title2: "B相电流",
						val2: "A",
						value2: ""
					},
					{
						title1: "C相电压",
						val1: "V",
						value1: "",
						title2: "C相电流",
						val2: "A",
						value2: ""
					}
				],
				swiperData: []
			}
		},
		onNavigationBarButtonTap(val) {
			this.$backToIndex(val)
		},
		onLoad(options) {
			this.optionData = {
				...options
			}
			this.baseImg = this.$store.state.baseImg
			this.getData(options)
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods: {
			// 改变echarts是否生成 切换loading图标
			changeEchartLoading(msg){
				this.echartsLoading = msg
			},
			changeSwiper(val){
				this.refreshSwiper = false;
				this.swiperData = this.swiperGroup[val];
				this.$nextTick(()=>{
					this.refreshSwiper = true
				})
			},
			getData(data){
				uni.showLoading({
				    title: '加载中',
						mask: false
				});
				this.$http.httpRequest({
					url:this.$api.deviceDetails,
					methods:"get",
					data:data
				}).then((res)=>{
					uni.hideLoading();
					if(!res){
						return uni.showToast({
							title:"服务器请求失败",
							icon:"none"
						})
					}
					this.infoData = {
						...this.infoData,
						...res.data.deviceDetails
					}
					//A相电压
					this.itemData[0].val1 = this.infoData.aVoltage + 'V'; 
					this.itemData[0].value1 = this.infoData.aVoltage;
					//A相电流
					this.itemData[0].val2 = this.infoData.aElectricity + 'A'; 
					this.itemData[0].value2 = this.infoData.aElectricity;
					
					//B相电压
					this.itemData[1].val1 = this.infoData.bVoltage + 'V'; 
					this.itemData[1].value1 = this.infoData.bVoltage;
					//B相电流
					this.itemData[1].val2 = this.infoData.bElectricity + 'A'; 
					this.itemData[1].value2 = this.infoData.bElectricity;
					
					//C相电压
					this.itemData[2].val1 = this.infoData.cVoltage + 'V'; 
					this.itemData[2].value1 = this.infoData.cVoltage;
					//C相电流
					this.itemData[2].val2 = this.infoData.cElectricity + 'A'; 
					this.itemData[2].value2 = this.infoData.cElectricity;
					
					// 给tab栏赋值
					this.tabList.forEach((item)=>{
						res.data.alarmCount.forEach((its)=>{
							if(item.alamrLevel == its.alarmLevel){
								item['count'] = its.r1
								// item['count'] = 5
							}
						})
					})
					const swiperData = res.data.alarmList;
					const group = {
						"0":[],
						"1":[],
						"2":[],
						"3":[],
						"4":[]
					}
					const swipers = handleSwiperGroup(group,swiperData,'alarmLevel');
					this.swiperGroup = swipers;
					this.swiperData = this.swiperGroup['0']
				}).catch((err)=>{
					uni.hideLoading();
				})
			},
			onChangeList() {
				if (this.nomalData == 'nomal') {
					this.nomalData = 'echarts'
				} else {
					this.nomalData = 'nomal'
				}
			}
		}
	}
</script>
<script module="echarts" lang="renderjs">
	import {rpxToPx} from "../../common/utils/index.js";
	var center1= ["25%","55%"]; //圆1的位置
	var center2 = ["75%","55%"]; //圆2的位置
	var colorSet = { //颜色配置
		dangerColor:"#ff3355",
		nomalColor:"#212c67",
		outColor1:"#ff3355",
    color: '#8594b8'
};
const windowWidth = uni.getSystemInfoSync().windowWidth
// 内环和外环的圆大小
var radius = ['95%','80%'];
	export default {
		data() {
			return {
				echartsLoadingFlag:false,
				echartsObj: {},
				nomalDataE: 'nomal',
				options: {
					backgroundColor: 'rgba(0,0,0,0)',
					series: [{
							name: "外部进度条1",
							type: "gauge",
							radius: radius[0],
							center: center1,
							splitNumber: 5,
							axisLine: {
								lineStyle: {
									color: [
										[90 / 220, colorSet.outColor1],
										[1, "#dfe0e6"]
									],
									width: rpxToPx(8,windowWidth)
								}
							},
							axisLabel: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							itemStyle: {
								show: false,
							},
							detail: {
								formatter: function(value) {
									if (value !== 0) {
										// var num = Math.round(value);
										return parseFloat(value).toFixed(2) + ' V';
									} else {
										return 0;
									}
								},
								offsetCenter: [0, '10%'],
								textStyle: {
									padding: [0, 0, 0, 0],
									fontSize: rpxToPx(25,windowWidth),
									fontWeight: '800',
									color: colorSet.outColor1
								}
							},
							title: { //标题
								show: true,
								offsetCenter: [0, '46%'], // x, y，单位px
								textStyle: {
									color: "#212c67",
									fontSize: rpxToPx(21,windowWidth), //表盘上的标题文字大小
									fontWeight: 800,
									// fontFamily: 'PingFangSC'
								}
							},
							data: [{
								name: "A相电压",
								value: 90,
							}],
							pointer: {
								show: false,
								length: '75%',
								radius: '20%',
								width: 5, //指针粗细
							},
							animationDuration: 4000,
						},
						{
							name: '内部刻度1',
							type: 'gauge',
							center: center1,
							radius: radius[1],
							min: 0, //最小刻度
							max: 220, //最大刻度
							splitNumber: 5, //刻度数量
							startAngle: 225,
							endAngle: -45,
							axisLine: {
								show: false,
								lineStyle: {
									width: rpxToPx(4,windowWidth),
									color: [
										[1, 'rgba(0,0,0,0)']
									]
								}
							}, //仪表盘轴线
							axisLabel: {
								show: true,
								color: colorSet.nomalColor,
								distance: rpxToPx(12,windowWidth),
								fontSize:rpxToPx(16,windowWidth),
								formatter: function(v) {
									return v + ''
								}
							}, //刻度标签。
							axisTick: {
								show: true,
								splitNumber: 10,
								lineStyle: {
									color: colorSet.color, //用颜色渐变函数不起作用
									width: rpxToPx(2,windowWidth),
								},
								length: rpxToPx(-6,windowWidth)
							}, //刻度样式
							splitLine: {
								show: true,
								length: rpxToPx(-11,windowWidth),
								lineStyle: {
									width: rpxToPx(4,windowWidth),
									color: colorSet.color, //用颜色渐变函数不起作用
								}
							}, //分隔线样式
							detail: {
								show: false
							},
							pointer: {
								show: false
							}
						},
						{
								name: "外部进度条2",
								type: "gauge",
								radius: radius[0],
								center: center2,
								splitNumber: 10,
								axisLine: {
									lineStyle: {
										color: [
											[90 / 220, colorSet.outColor1],
											[1, "#dfe0e6"]
										],
										width: rpxToPx(8,windowWidth)
									}
								},
								axisLabel: {
									show: false,
								},
								axisTick: {
									show: false,
						
								},
								splitLine: {
									show: false,
								},
								itemStyle: {
									show: false,
								},
								detail: {
									formatter: function(value) {
										if (value !== 0) {
											// var num = Math.round(value);
											return parseFloat(value).toFixed(2) + ' A';
										} else {
											return 0;
										}
									},
									offsetCenter: [0, '10%'],
									textStyle: {
										padding: [0, 0, 0, 0],
										fontSize: rpxToPx(24,windowWidth),
										fontWeight: '800',
										color: colorSet.outColor1
									}
								},
								title: { //标题
									show: true,
									offsetCenter: [0, '46%'], // x, y，单位px
									textStyle: {
										color: "#212c67",
										fontSize: rpxToPx(21,windowWidth), //表盘上的标题文字大小
										fontWeight: 800,
										// fontFamily: 'PingFangSC'
									}
								},
								data: [{
									name: "A相电流",
									value: 90,
								}],
								pointer: {
									show: false,
									length: '75%',
									radius: '20%',
									width: rpxToPx(10,windowWidth), //指针粗细
								},
								animationDuration: 4000,
							},
							{
								name: '内部刻度2',
								type: 'gauge',
								center: center2,
								radius: radius[1],
								min: 0, //最小刻度
								max: 220, //最大刻度
								splitNumber: 5, //刻度数量
								startAngle: 225,
								endAngle: -45,
								axisLine: {
									show: false,
									lineStyle: {
										width: rpxToPx(2,windowWidth),
										color: [
											[1, 'rgba(0,0,0,0)']
										]
									}
								}, //仪表盘轴线
								axisLabel: {
									show: true,
									color: colorSet.nomalColor,
									distance: rpxToPx(12,windowWidth),
									fontSize:rpxToPx(16,windowWidth),
									formatter: function(v) {
										return v + ''
									}
								}, //刻度标签。
								axisTick: {
									show: true,
									splitNumber: 10,
									lineStyle: {
										color: colorSet.color, //用颜色渐变函数不起作用
										width: rpxToPx(2,windowWidth),
									},
									length: rpxToPx(-6,windowWidth)
								}, //刻度样式
								splitLine: {
									show: true,
									length: rpxToPx(-11,windowWidth),
									lineStyle: {
										width: rpxToPx(4,windowWidth),
										color: colorSet.color, //用颜色渐变函数不起作用
									}
								}, //分隔线样式
								detail: {
									show: false
								},
								pointer: {
									show: false
								}
							}
					]
				}
			}
		},
		computed:{
			flagChange(){
				const {echartsLoadingFlag,nomalDataE} = this;
				return {
					echartsLoadingFlag,
					nomalDataE
				}
			}
		},
		watch:{
			flagChange(val){
				if(val.nomalDataE == 'echarts' && val.echartsLoadingFlag){
					// 加载完成
					setTimeout(() => {
						this.initEcharts() //初始化echarts
					}, 250)
				}
			}
		},
		methods: {
			updateBaseImg(newValue, oldValue, ownerInstance, instance){},
			//点击列表切换按钮切换列
			changeList(event, ownerInstance) {
				ownerInstance.callMethod('onChangeList') //调用主script方法
				if (this.nomalDataE == 'nomal') {
					this.nomalDataE = 'echarts';
					// setTimeout(() => {
					// 	// this.initEcharts() //初始化echarts
					// }, 250)
				} else {
					this.nomalDataE = 'nomal'
				}
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				this.initEchartsJs(ownerInstance)
			},
			// 工具函数用于修改options内数据 接收obj:进入修改对象,value: 数值number,title : 底部标题string, maxData: 刻度盘最大值number
			controlFun(obj,value,title,maxData){
				obj.max = maxData
				obj.data = [{name:title,value:value}]
				obj.axisLine.lineStyle.color[0] = [(value / maxData).toFixed(2),colorSet.nomalColor]
				obj.detail.textStyle.color = colorSet.nomalColor
				if(value > (maxData*0.6)){
					obj.axisLine.lineStyle.color[0][1] = colorSet.dangerColor
					obj.detail.textStyle.color = colorSet.dangerColor
				}
			},
			initEcharts() {
				this.itemData.forEach((item, index) => {
					if (!this.echartsObj['echarts' + index]) {
						this.echartsObj['echarts' + index] = echarts.init(document.getElementById('echarts' + index))
						this.options.series.forEach((its)=>{
							if(its.name == '外部进度条1'){
								let baseData = 250 //基础最大值
								this.controlFun(its,item.value1,item.title1,baseData)
							}
							if(its.name == '内部刻度1'){
								let baseData = 250 //基础最大值
								its.max = baseData;
							}
							if(its.name == '外部进度条2'){
								let baseData = 150 //基础最大值
								this.controlFun(its,item.value2,item.title2,baseData)
							}
							if(its.name == '内部刻度2'){
								let baseData = 150 //基础最大值
								its.max = baseData;
							}
							
						})
						this.echartsObj['echarts' + index].setOption(this.options)
					}
				})
			},
			// 初始化echarts.js
			initEchartsJs(ownerInstance){
				const that = this;
				ownerInstance.callMethod('changeEchartLoading',true)
				if (typeof window.echarts === 'function') {
					// this.initEcharts()
				} else {
					// 动态引入较大类库避免影响页面展示
					let scriptEcharts = document.querySelector('#echarts-js')
					if (!scriptEcharts) {
						const script = document.createElement('script');
						script.async='async';
						// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
						// script.src = this.baseImg + '/js/echarts-power.js';
						// #ifdef APP-PLUS
						script.src = 'static/js/echarts.min.js';
						// #endif
						// #ifdef H5
						script.src = '/static/js/echarts.min.js';
						// #endif
						// script.onload = this.initEcharts.bind(this)
						script.id = 'echarts-js';
						document.head.appendChild(script);
						script.onload = function(){
							// 加载完毕
							that.echartsLoadingFlag = true;
							ownerInstance.callMethod('changeEchartLoading',false)
						}
					}
				}
			}
		},
		mounted() {

		}
	}
</script>
<style scoped lang="scss">
	.detail-wrap {
		border: 1px solid transparent;
		padding-top: 81rpx;
		color: #212c67;
	}

	.model-top {
		display: flex;
		justify-content: space-around;
	}

	.rect {
		margin: 0 auto 30rpx auto;
		width: $baseWidth;
		border-radius: 30rpx;
		position: relative;
		background-color: rgba(255, 255, 255, 0.88);
		padding: 40rpx 32rpx;
		
		.echarts-loading{
			text-align: center;
			position: absolute;
			left: 0;
			width: 100%;
			.loading-text{
				font-size: 30rpx;
				margin-top: 30rpx;
				color: #999;
			}
		}
	}

	.changeLsitBtn {
		width: 44rpx;
		height: 44rpx;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.arc {
		width: 205rpx;
	}

	.arc-image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		box-shadow: 0 0 20rpx #212C67;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 64rpx 55rpx;
		position: relative;
		transform: translateY(-95rpx);
	}

	.float-block {
		width: 25%;
	}

	.arc-image .red-dot {
		position: absolute;
		top: 25%;
		left: 60%;
		width: 30rpx;
		height: 30rpx;
		// background: #FF3355;
		border-radius: 50%;
	}

	.echartsItems:last-child .echarts-item {
		margin-bottom: 0;
	}

	.echarts-item {
		width: 100%;
		height: 280rpx;
		margin-bottom: 54rpx;
	}

	.mess {
		width: 343rpx;
		line-height: 52rpx;
	}

	.info-label,
	.info-text {
		font-size: 28rpx;
	}

	.info-label {
		color: #919297;
	}

	.label {
		float: left;
		color: #888;
		width: 50rpx;
		text-align: center;
	}

	.text {
		float: left;
		width: 270rpx;
		/* margin-left: 26rpx; */
	}

	.alarm-text {
		line-height: 62rpx;
		margin: 50rpx 0;
	}

	.float-label {
		color: #888;
	}

	.text-color-red {
		color: #FF3355;
	}

	.text-color-nor {
		color: #212C67;
	}

	.voltage {
		height: 120rpx;
		line-height: 120rpx;
	}

	.swiper-it {
		margin: 0 30rpx 60rpx;
		background: #fff;
		border-radius: 30rpx;
		min-height: 250rpx;
	}
	.swiper {
		height: 260rpx;
	}

	.left-sw {
		float: left;
		width: 160rpx;
	}

	.right-sw {
		float: left;
		width: calc(100% - 160rpx);
	}

	.alarm-swiper {
		line-height: 62rpx;
		padding: 30rpx 60rpx;
		.noData{
			text-align: center;
			font-size: 25rpx;
			color: #999;
		}
	}
	.tabs-content{
		width: $baseWidth;
		margin: 0 auto;
	}
</style>
